import { LocalizationContext, MenuItem, ThemeContext } from "../../core";

import DarkIcon from "./DarkIcon";
import LightIcon from "./LightIcon";
import { FC, useContext } from "react";

export interface SwitchThemeMenuItemProps {
  onClick(): void;
}

const SwitchThemeMenuItem: FC<SwitchThemeMenuItemProps> = ({ onClick }) => {
  const theme = useContext(ThemeContext);
  const l10n = useContext(LocalizationContext);
  const isDarkTheme = theme.currentTheme === "dark";

  const label =
    l10n && l10n.theme
      ? isDarkTheme
        ? l10n.theme.switchLightTheme
        : l10n.theme.switchDarkTheme
      : isDarkTheme
      ? "Switch to the light theme"
      : "Switch to the dark theme";

  return (
    <MenuItem
      icon={isDarkTheme ? <LightIcon /> : <DarkIcon />}
      onClick={onClick}
    >
      {label}
    </MenuItem>
  );
};

export default SwitchThemeMenuItem;
